<template>
    <div class="common-layout">
        <el-container>
            <!-- 头部部分 --> 
            <el-header>
                <el-row justify="space-between" align="middle">
                    <el-col :span="6">
                        <div class="breadcrumb">
                            <el-icon><Fold /></el-icon>
                            <span>数据统计</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="user-info">
                            <el-avatar :size="30" src="" />
                            <span class="username">admin</span>
                        </div>
                    </el-col> 
                </el-row>
            </el-header>
            <el-header class="white"></el-header>
            <!--内容部分-->
            <el-main>
                <!--搜索部分-->
                <el-header class="search">
                    <el-input v-model="search" style="width: 150px" placeholder="姓名或手机号"/>
                    <el-select placeholder="类型" v-model="type" style="width: 150px;">
                        <el-option v-for="(item, index) in typeOptions" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                     <el-select placeholder="用户类型" v-model="userType" style="width: 150px;">
                        <el-option v-for="(item, index) in userTypeOptions" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                     <el-select placeholder="付款平台" v-model="paymentPlatform" style="width: 150px;">
                        <el-option v-for="(item, index) in platformOptions" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                     <div class="time">
                        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" :prefix-icon="Calendar" style="width: 320px" />
                    </div>
                     <el-select placeholder="操作人" v-model="operator" style="width: 150px;">
                        <el-option v-for="(item, index) in operatorOptions" :key="index" :value="item.value" :label="item.label"></el-option>
                    </el-select>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </el-header>
                <!--刷新部分-->
                <el-header class="refresh" style="display: flex; justify-content: space-between;">
                    <h3>总计：{{ totalAmount }}元</h3>
                    <div>
                         <el-button @click="open">
                        <el-icon><Download /></el-icon>
                        导出
                    </el-button>
                    <el-button type="info" @click="handleRefresh">
                       <el-icon><Refresh /></el-icon>
                       刷新
                    </el-button>
                    </div>
                </el-header>
                <!--表格部分-->
                <el-table :data="tableData" border style="width: 100%" :loading="loading">
                    <el-table-column prop="payment_platform" label="付款平台" ></el-table-column>
                    <el-table-column prop="system_balance" label="系统余额/元" ></el-table-column>
                    <el-table-column prop="amount" label="申请金额/元" ></el-table-column>
                    <el-table-column prop="nickname" label="收款人姓名" ></el-table-column>
                    <el-table-column prop="phone" label="收款人手机号" ></el-table-column>
                    <el-table-column prop="user_type" label="用户类型" >
                        <template #default="scope">
                            {{ userTypeMap[scope.row.user_type] || '未知' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" >
                        <template #default="scope">
                            {{ typeMap[scope.row.type] || '未知' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="username" label="操作人" ></el-table-column>
                    <el-table-column prop="payment_time" label="操作时间" ></el-table-column>
                    <el-table-column prop="type_desc" label="备注" ></el-table-column>
                </el-table>
                 <div class="demo-pagination-block">
                    <el-pagination
                    v-model:current-page="pagination.currentPage"
                    v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    background
                    />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { getAAAList } from '@/components/Finance/DeviceStatisics'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { Fold, Refresh, Download, Calendar } from '@element-plus/icons-vue'

// 搜索筛选条件
const search = ref('')
const type = ref('')
const userType = ref('')
const paymentPlatform = ref('')
const dateRange = ref([])
const operator = ref('')

// 下拉选项数据
const typeOptions = ref([
  { label: '支出', value: '支出' },
  { label: '收入', value: '收入' }
])
const userTypeOptions = ref([
  { label: '用户', value: 0 },
  { label: '商家', value: 1 }
])
const platformOptions = ref([
  { label: '迈玛微信', value: '迈玛微信' },
  { label: '其他平台', value: '其他' }
])
const operatorOptions = ref([
  { label: 'admin', value: 'admin' },
  { label: '其他操作人', value: 'other' }
])

// 映射关系
const typeMap = { '支出': '支出', '收入': '收入' }
const userTypeMap = { 0: '用户', 1: '商家' }

// 分页配置
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表格数据和加载状态
const tableData = ref([])
const loading = ref(false)
const totalAmount = computed(() => {
  return tableData.value.reduce((sum, item) => sum + (item.amount || 0), 0).toFixed(2)
})

// 获取数据
const getlist = async (params = {}) => {
  loading.value = true
  try {
    const res = await getAAAList({
      pageIndex: pagination.currentPage,
      pageSize: pagination.pageSize,
      keyword: search.value,
      type: type.value,
      userType: userType.value,
      paymentPlatform: paymentPlatform.value,
      startTime: dateRange.value[0] ? new Date(dateRange.value[0]).getTime() : '',
      endTime: dateRange.value[1] ? new Date(dateRange.value[1]).getTime() : '',
      operator: operator.value,
      ...params
    })
    tableData.value = res?.dataset?.list || []
    pagination.total = res?.dataset?.totalSize || 0
  } catch (error) {
    console.error('获取数据失败:', error)
    ElMessage.error('数据加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 初始化加载
getlist()

// 搜索
const handleSearch = () => {
  pagination.currentPage = 1
  getlist()
}

// 分页大小改变
const handleSizeChange = (val) => {
  pagination.pageSize = val
  pagination.currentPage = 1
  getlist()
}

// 当前页改变
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  getlist()
}

// 刷新
const handleRefresh = () => {
  search.value = ''
  type.value = ''
  userType.value = ''
  paymentPlatform.value = ''
  dateRange.value = []
  operator.value = ''
  pagination.currentPage = 1
  getlist()
  ElMessage.success('刷新成功')
}

// 导出
const open = () => {
  ElMessageBox.confirm(
    `确定要导出符合筛选条件的数据吗？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'info'
    }
  )
    .then(() => {
      const downloadLoading = ElLoading.service({
        text: '导出中，请稍候...',
        lock: true
      })
      setTimeout(() => {
        downloadLoading.close()
        ElMessage.success('导出成功！文件已开始下载')
      }, 1500)
    })
    .catch(() => {
      ElMessage.info('已取消导出')
    })
}
</script>

<style lang="less" scoped>
/* 头部部分 */
.el-header{
    height: 40px;
    border-bottom: 1px solid rgb(187, 186, 186);
    padding: 0 20px;
}
.breadcrumb{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}
.user-info{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}
.white{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 8px !important;
    border-bottom: none !important;
}
/*内容部分*/
.el-main{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}
/*搜索部分*/
.search{
    width: 100%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
/*刷新部分*/
.refresh{
    width: 100%;
    border: none;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    h3 {
        font-size: 16px;
        font-weight: 500;
        margin: 0;
    }
}
/*表格部分*/
:deep(.el-table) {
    width: 100% !important;
    margin-bottom: 20px;
    
    .el-table__header-wrapper,
    .el-table__body-wrapper {
        width: 100% !important;
    }
    
    .el-table__header {
        width: 100% !important;
        background-color: #f5f7fa;
    }
    
    .el-table__body {
        width: 100% !important;
    }
    
    .el-table__row {
        height: 60px !important;
    }
    
    .el-table__header th,
    .el-table__body td {
        text-align: center;
        font-size: 13px;
        padding: 12px 8px;
    }
}
/*分页器*/
.demo-pagination-block{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    :deep(.el-pagination) {
        display: flex;
        align-items: center;
        gap: 10px;
        .el-pagination__total {
            font-size: 13px;
            color: #666;
        }
        .el-select .el-input {
            width: 80px;
        }
        .el-pager li {
            min-width: 32px;
            height: 32px;
            line-height: 32px;
        }
    }
}

/* 适配小屏幕 */
@media (max-width: 1200px) {
    .search {
        gap: 15px;
    }
    :deep(.el-table) {
        font-size: 12px;
        .el-table__row {
            height: 50px !important;
        }
        .el-table__header th,
        .el-table__body td {
            padding: 8px 4px;
        }
    }
}

@media (max-width: 768px) {
    .search {
        flex-direction: column;
        align-items: flex-start;
    }
    .demo-pagination-block {
        justify-content: center;
    }
    :deep(.el-pagination) {
        flex-wrap: wrap;
        justify-content: center;
    }
}
</style>